<template>
  <div class="doctor-list-container">

    <!-- 医生信息开始 -->
    <div class="container-fluid py-5">
      <div class="container">
        <div class="text-center mx-auto mb-5" style="max-width: 31.25rem">
          <h5
            class="d-inline-block text-primary text-uppercase border-bottom border-5"
          >
            {{ outpatient }}
          </h5>
          <h1 class="display-4">医生名单</h1>
        </div>

        <!-- <div class="owl-carousel team-carousel position-relative"> -->
        <!-- 取消轮播 -->
        <div class="team-carousel position-relative">
          <div
            class="team-item"
            v-for="doctor in doctorList"
            :key="doctor.doctorId"
          >
            <div class="row g-0 bg-light rounded overflow-hidden">
              <div class="col-12 col-sm-5 h-100">
                <!-- 可调整图片占比 -->
                <img
                  class="img-fluid h-100 w-100"
                  :src="doctor.image"
                  style="object-fit: cover"
                />
                <!-- <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit"></el-image> -->
              </div>
              <div class="col-12 col-sm-7 h-100 d-flex flex-column">
                <div class="mt-auto p-4">
                  <h3>{{ doctor.name }}&nbsp;性别：{{ doctor.sex }}</h3>
                  <h6 class="fw-normal fst-italic text-primary mb-4">
                    预约价格:<span style="color: red">{{ doctor.price }}</span
                    >元
                  </h6>
                  <p class="m-0">{{ doctor.description }}</p>
                </div>
                <div class="d-flex mt-auto border-top p-4">
                  <a
                    @click="handleUserOrder(doctor.doctorId)"
                    class="btn btn-info rounded-pill py-3 px-5 my-2 text-white"
                    >预约</a
                  >
                </div>
              </div>
            </div>
            <p></p>
          </div>
          <p></p>
        </div>
      </div>
    </div>
    <!-- 医生信息结束 -->
    <el-dialog
      title="预约"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="dialogBeforeClose"
    >
      <div class="time-container">
        <div class="block">
          <div class="time-pick-row">
            <span>预约日期：</span>
            <el-date-picker
              v-model="value1"
              type="date"
              format="yyyy-MM-dd"
              @change='getFreeTime'
              popper-class="noneMinute"
              placeholder="请选择预约日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
          <div class="time-pick-row">
            <span>预约时间：</span>
            <el-select v-model="timeSelected" placeholder="请选择">
              <el-option
                v-for="time in timeOptions"
                :key="time"
                :label="time"
                :value="time"
                :disabled="judgeFreeTime(time)"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderTime"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import { getDoctorList,userOrder,getDoctorFree } from "@/api/user.js"
export default {
  name: "DoctorList",
  data() {
    return {
      outpatientList: [
        {
          id: 1,
          title: "发热门诊",
        },
        {
          id: 2,
          title: "内科门诊",
        },
        {
          id: 3,
          title: "耳鼻喉科门诊",
        },
        {
          id: 4,
          title: "儿科门诊",
        },
        {
          id: 5,
          title: "急诊",
        },
      ],
      doctorList: [],
      dialogVisible: false,
      value1: "",
      timeSelected: "",
      freeTime: [],
      pickerOptions: {
        disabledDate: function (date) {
          return date.getTime() < Date.now()
        },
      },
      timeOptions: [
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
      ],
      doctorId:''
    }
  },
  computed: {
    computed: {
      ...mapGetters(["id"]),
    },
    outpatient() {
      for (let i = 0; i < this.outpatientList.length; i++) {
        console.log(this.$route.params.id)
        if (this.outpatientList[i].id == this.$route.params.id) {
          return this.outpatientList[i].title
        }
      }
    },
  },
  created(){
    this.handleGetDoctorData()
  },
  mounted() {
    
  },
  watch:{
    '$route':{
        handler(to) {
        	// to：目标路由对象
            // this.loading(to.params.logType);//查询数据
          if(to.path.includes('/doctor/list')){
            this.handleGetDoctorData()
          }
        }
    }
  },
  methods: {
    async handleGetDoctorData() {
      console.log('getData',this.outpatient)
      let { data } = await getDoctorList(this.outpatient)
      if (data) {
        this.doctorList = data
      }
    },
    handleUserOrder(doctorId) {
      this.dialogVisible = true
      this.doctorId = doctorId
    },
    dialogBeforeClose() {},
    judgeFreeTime(time) {
      return !this.freeTime.includes(time)
    },
    async getFreeTime(){
      const time = this.value1.getTime()
      const res = await getDoctorFree({doctorId:this.doctorId,time})
      console.log(res,'freeTime')
      this.freeTime = res.data
    },
    async orderTime(){
      const patientId = localStorage.getItem('token')
      const selectedDate = this.value1.getFullYear() +'-' + this.value1.getMonth() + '-' + this.value1.getDay()
      const time = new Date(this.value1.getFullYear(),this.value1.getMonth(), this.value1.getDate(),parseInt(this.timeSelected)).getTime()
      // debugger
      console.log(time,new Date('2023-01-09 13:00').getTime(),new Date('2023-01-09 13:00'),new Date(this.value1.getFullYear(),this.value1.getMonth() + 1, this.value1.getDate(),parseInt(this.timeSelected)))
      const res = await userOrder({patientId,doctorId:this.doctorId,time})
      console.log(res)
      if(res.code  == 200){
        this.$message.success('预约成功')
        this.dialogVisible = false
        this.getFreeTime()
        this.value1 = ''
        this.timeSelected = ''
      }else {
        this.$message.error('预约失败,请检查是否为账户余额不足')
      }
    }
  },
}
</script>

<style lang="scss">
.text-primary {
  color: var(--primary) !important;
}
// .home-container{

// }

:root {
  --primary: #13c5dd;
  --secondary: #354f8e;
  --light: #eff5f9;
  --dark: #1d2a4d;
}

.btn {
  font-weight: 700;
  transition: 0.5s;
}

.btn:hover {
  -webkit-box-shadow: 0 0.5rem 0.375rem -0.375rem #555555;
  -moz-box-shadow: 0 0.5rem 0.375rem -0.375rem #555555;
  box-shadow: 0 0.5rem 0.375rem -0.375rem #555555;
}

.btn-primary {
  color: #ffffff;
}

.btn-square {
  width: 2.25rem;
  height: 2.25rem;
}

.btn-sm-square {
  width: 1.75rem;
  height: 1.75rem;
}

.btn-lg-square {
  width: 2.875rem;
  height: 2.875rem;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

// .back-to-top {
//     position: fixed;
//     display: none;
//     right: 1.875rem;
//     bottom: 0;
//     border-radius: 50% 50% 0 0;
//     z-index: 99;
// }

.navbar-light .navbar-nav .nav-link {
  // font-family: 'Jost', sans-serif;
  font-family: "SimHei", sans-serif;
  position: relative;
  margin-left: 1.875rem; //导航栏间隔
  padding: 1.875rem 0;
  // font-size: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  outline: none;
  transition: 0.5s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary);
}

@media (min-width: 62rem) {
  .navbar-light .navbar-nav .nav-link::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0.3125rem;
    bottom: 0;
    left: 50%;
    background: var(--primary);
    transition: 0.5s;
  }

  .navbar-light .navbar-nav .nav-link:hover::before,
  .navbar-light .navbar-nav .nav-link.active::before {
    width: 100%;
    left: 0;
  }
}

@media (max-width: 61.99875rem) {
  .navbar-light .navbar-nav .nav-link {
    margin-left: 0;
    padding: 0.625rem 0;
  }
}

@media (min-width: 36rem) {
  .team-item .row {
    height: 21.875rem; //行高
  }
}

.team-carousel .owl-nav {
  position: absolute;
  padding: 0 2.8125rem;
  width: 100%;
  height: 2.8125rem;
  top: calc(50% - 1.40625rem);
  left: 0;
  display: flex;
  justify-content: space-between;
}

.team-carousel .owl-nav .owl-prev,
.team-carousel .owl-nav .owl-next {
  position: relative;
  width: 2.8125rem;
  height: 2.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--primary);
  border-radius: 2.8125rem;
  font-size: 1.375rem;
  transition: 0.5s;
}

.team-carousel .owl-nav .owl-prev:hover,
.team-carousel .owl-nav .owl-next:hover {
  background: var(--dark);
}

.doctor-list-container {
  .el-time-spinner__wrapper {
    width: 100% !important;
  }

  .el-scrollbar:nth-of-type(0) {
    display: none !important;
  }
  .el-scrollbar:nth-last-child() {
    display: none !important;
  }
  .el-scrollbar:nth-child(2) {
    display: none !important;
  }

  .time-pick-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2rem auto;
  }

  .time-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-select{
    width: 220px;
  }
}
</style>
